<template>
  <div>
    {{ xiaoming.name }}今年{{ xiaoming.age }}
    <button @click="resetState">修改</button>
  </div>
</template>
<script>
//使用辅助函数mapState获取store的状态
import { mapState } from "vuex";
export default {
  methods: {
    resetState() {
      this.$store.state.userInfo.name = "大明";
    },
  },
  data() {
    return {
      userInfo: {},
    };
  },
  //获取store里的state必须写在computed里面
  computed: {
    //...扩展运算符  es6语法
    //数组方式 容易和data数据冲突
    // ...mapState(["userInfo"]),
    ...mapState({
      //xiaoming是重命名，userInfo是从store的state里取出来的
      xiaoming: "userInfo",
    }),
  },
};
</script>